<template>
  <div>
    <crud-header title="我的课表">
      <template #header>
        <div class="slot-box">
          <div class="example-group">
            <div class="temp-flex-box">
              <div class="pass temp-box"></div>
              已通过
            </div>
            <div class="temp-flex-box">
              <div class="wait temp-box"></div>
              审批中
            </div>
            <div class="temp-flex-box">
              <div class="reject temp-box"></div>
              已驳回
            </div>
          </div>
          <div class="operation-btn-group">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleClickCreateBtn">开课</el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleClickAdjustBtn">调课</el-button>
          </div>
        </div>
      </template>
    </crud-header>
    <course-table :course-data="courseData" ref="courseTable"></course-table>
  </div>
</template>

<script>
  import staticCourseTableData from '@/staticData/courseTable'
  import CourseTable from '@/components/Course/Table'
  import CrudHeader from '@/components/crud/CrudHeader/index'
  import courseApi from '@/api/course'

  export default {
    components: { CrudHeader, CourseTable },
    data() {
      return {
        courseData: []
      }
    },
    methods: {
      handleClickCreateBtn() {
        this.$router.push({ path: '/course/apply' })
      },
      handleClickAdjustBtn() {
        this.$router.push({ path: '/course/adjust' })
      },
      async getTableData() {
        let rawData = await courseApi.getCourseTable()
        let data = await this.$store.dispatch('course/transform', rawData)
        this.courseData = data
      }
    },
    created() {
      this.getTableData()
    }
  }
</script>

<style scoped>
  .operation-btn-group {
    float: right;
    margin-right: 40px;
    margin-top: 5px;
  }

  .temp-box {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    margin-right: 5px;
  }

  .temp-flex-box {
    margin-top: 10px;
    display: flex;
    font-size: 14px;
    color: gray;
    margin-right: 20px;
  }

  .example-group {
    float: right;
    display: flex;
  }

  .slot-box {
    margin-top: 5px;
  }

  .pass {
    background-color: #73d940;
  }

  .wait {
    background-color: #E6A23C;
  }

  .reject {
    background-color: #F56C6C;
  }
</style>
